<template>
    <v-layout fill-height style="display: block; overflow-y: auto;">
        <v-flex xs12 sm6 offset-sm3>
            <v-card>
                <v-card-title style="padding: 4px; padding-top: 10px;">
                    <v-btn
                            small
                            dark
                            v-for="btn in btns"
                            :key="btn.path"
                            @click="btn_call(btn.path)"
                            :color="btn.color"
                    >
                        {{ btn.name }}
                    </v-btn>
                </v-card-title>

                <v-list subheader>
                    <v-subheader>
                        <v-btn small icon @click="btn_back">
                            <v-icon>arrow_back</v-icon>
                        </v-btn>
                        <v-icon>explore</v-icon>&nbsp;
                        {{ cur_path }}
                    </v-subheader>
                    <v-list-tile
                            v-for="item in items"
                            :key="item.id"
                            avatar
                            @click="item_click(item)"
                    >
                        <v-list-tile-avatar>
                            <v-icon>
                                {{ file_icon[item.file] }}
                            </v-icon>
                        </v-list-tile-avatar>

                        <v-list-tile-content>
                            <v-list-tile-title v-html="item.name"></v-list-tile-title>

                        </v-list-tile-content>
                        <div v-if="!item.isdir" style="font-size: 80%;">{{ item.sizestr }}</div>
                        <v-list-tile-action>

                            <v-icon color='teal' v-if="!item.isdir">cloud_download</v-icon>
                        </v-list-tile-action>
                    </v-list-tile>
                </v-list>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script>
    export default {
        data: () => ({
            n: 0,
            file_icon: {
                folder: 'mdi-folder',
                html: 'mdi-language-html5',
                js: 'mdi-nodejs',
                json: 'mdi-json',
                md: 'mdi-markdown',
                pdf: 'mdi-file-pdf',
                png: 'mdi-file-image',
                txt: 'mdi-file-document-outline',
                xls: 'mdi-file-excel',
                ppt: 'mdi-file-powerpoint',
                doc: 'mdi-file-document',
                file: 'mdi-file',
                zip: 'mdi-zip-box',
            },
            cur_path: "Home/",
            btns: [],
            items: [],
        }),
        mounted() {
            // this.renderMDsrc($("#md_src").text());
            var th = this;
            th.items = [];
            th.axios({
                method: "get",
                url: "/api/info",
                // auth: {
                //     username: "admin",
                //     password: "admin",
                // }
            }).then((response) => {
                th.cfg_floders = response.data.data;
                // console.log(th.cfg);
                var root_items = [];
                th.cfg_floders.forEach(function (v, i) {
                    if (v.Download) {
                        th.n += 1;
                        root_items.push({
                            id: th.n,
                            name: v.Name,
                            path: v.Name + "/", // 使用虚拟名称
                            color: "blue",
                        })
                    }
                });
                // console.log(root_items);
                th.btns = root_items;

                if (root_items.length > 0) {
                    this.btn_call(root_items[0].path);
                }
            })
        },
        methods: {
            btn_call(path) {
                this.cur_path = path;
                this.fetchSubDir(path);
            },
            btn_back() {
                var old_path = this.cur_path;
                old_path = old_path.substr(0, old_path.length - 1);
                var i = old_path.lastIndexOf("/");
                if (i > 0) {
                    this.btn_call(old_path.substr(0, i + 1));
                }
            },
            item_click(item) {
                if (item.isdir) {
                    this.btn_call(item.path);
                } else {
                    this.download_path(item);
                }
            },
            download_path(item) {
                // 创建隐藏的可下载链接
                var eleLink = document.createElement('a');
                eleLink.download = item.name;
                eleLink.style.display = 'none';
                eleLink.target = "_blank";
                // 字符内容转变成blob地址
                // var blob = new Blob(["/api/file/" + item.path]);
                // eleLink.href = URL.createObjectURL(blob);
                eleLink.href = "/api/file/" + item.path;
                // 触发点击
                document.body.appendChild(eleLink);
                eleLink.click();
                // 然后移除
                document.body.removeChild(eleLink);
            },
            fetchSubDir(root_path) {
                var th = this;
                var item_children = [];
                // var req = new Promise(function (resolve, reject) {
                return th.axios({
                    method: "get",
                    url: "/api/list/" + root_path,
                    params: {
                        filter: '',
                        exclude: '.md,.markdown',
                    },
                    // auth: {
                    //     username: "admin",
                    //     password: "admin",
                    // }
                }).then((response) => {
                    var fs_list = response.data.data;

                    fs_list.forEach(function (v, i) {
                        th.n += 1;
                        var one = {
                            id: th.n,
                            name: v.Name,
                            path: v.Path + v.Name,
                            size: v.Size,
                            isdir: v.IsDir,
                        };
                        if (v.IsDir) {
                            one.path += "/";
                            one.file = "folder";
                        } else {
                            var last = one.name.substr(one.name.lastIndexOf(".") + 1).toLowerCase();
                            one.file = "file";
                            if (["png", "jpg", "gif", "svg", "psd"].indexOf(last) !== -1) {
                                one.file = "png";
                            } else if (["zip", "7z", "rar", "tar", "gz", "iso"].indexOf(last) !== -1) {
                                one.file = "zip";
                            } else if (["md", "markdown"].indexOf(last) !== -1) {
                                one.file = "md";
                            } else if (["txt", "log"].indexOf(last) !== -1) {
                                one.file = "txt";
                            } else if (["js", "script", "py", "go", "rs", "bat", "json"].indexOf(last) !== -1) {
                                one.file = "js";
                            } else if (["csv", "xls", "xlsx"].indexOf(last) !== -1) {
                                one.file = "xls";
                            } else if (["doc", "docx"].indexOf(last) !== -1) {
                                one.file = "doc";
                            } else if (["ppt", "pptx"].indexOf(last) !== -1) {
                                one.file = "ppt";
                            }

                            // format size
                            one.sizestr = "";
                            if (one.size < 1024) {
                                one.sizestr = one.size + "B";
                            } else if (one.size < 1024 * 1024) {
                                one.sizestr = parseFloat(one.size / 1024).toFixed(2) + "K";
                            } else if (one.size < 1024 * 1024 * 1024) {
                                one.sizestr = parseFloat(one.size / 1024 / 1024).toFixed(2) + "M";
                            } else {
                                one.sizestr = parseFloat(one.size / 1024 / 1024 / 1024).toFixed(2) + "G";
                            }
                        }
                        item_children.push(one);
                    });
                    th.items = item_children;
                });

            },
        }
    }
</script>

<style>

</style>
